<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta http-equiv="x-ua-compatible" content="ie=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, minimal-ui" />
		<link rel="stylesheet" href="build/conversational-form-docs.min.css">

		<script type="text/javascript" src="https://cf-4053.kxcdn.com/conversational-form/0.9.6/conversational-form.min.js" crossorigin></script>
	</head>
	<body>
		<script src="build/conversational-form-examples.min.js" id="examples-script"></script>

		<main class="content">
			<menu id="small-screen-menu">
				<h2>Conversational Form examples</h2>

				<div class="switch-btn">
					<label class="switch">
						<input type="checkbox" onclick="window.conversationalFormExamples.toggleConversation(event)">
						<div class="slider round"></div>
					</label>
				</div>

				<div class="hamburger-btn" onclick="window.conversationalFormExamples.toggleMenuState(event)">
					<svg viewBox="0 0 29 14" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
						<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="square">
							<g transform="translate(-325.000000, -87.000000)" stroke="#FFFFFF" stroke-width="2">
								<g transform="translate(325.000000, 87.000000)">
									<path d="M27.4802431,7 L1.23827993,7"></path>
									<path d="M27.4802431,1 L1.23827993,1"></path>
									<path d="M27.4802431,13 L1.23827993,13"></path>
								</g>
							</g>
						</g>
					</svg>
				</div>
			</menu>

			<div class="switch-btn" id="cf-toggle-btn" data-label="Enable Conversational Form" data-label-toggled="Disable Conversational Form">
				<label class="switch">
					<input type="checkbox" onclick="window.conversationalFormExamples.toggleConversation(event)">
					<div class="slider round"></div>
				</label>
			</div>

			<section id="info" role="info">
				<div class="close-btn" onclick="window.conversationalFormExamples.toggleMenuState()">
					<svg viewBox="0 0 22 22" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
						<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="square">
							<g transform="translate(-328.000000, -83.000000)" stroke="#FFFFFF" stroke-width="2">
								<g id="close" transform="translate(329.000000, 84.000000)">
									<path d="M19.6371966,19.2779351 L1.08132646,0.722064927"></path>
									<path d="M19.4923318,0.722064927 L0.936461672,19.2779351"></path>
								</g>
							</g>
						</g>
					</svg>
				</div>

				<article>
					<h1 id="writer">
						Formless form
					</h1>
					<h2>
						A Conversational Form generated from JSON, see file <a href="files/formless.json" target="_blank">formless.json</a>
						</br></br>Options and tag attributes are 1:1 with a form tag.
						</br></br>Example here also mimics calls to a server and injecting of server created tags.
						</br>This can be used to validate and create custom flows Server Side.
					</h2>
				</article>
			</section>

			<section role="form">
				<div class="form-outer">
					<h2>No form, it's all JS</h2>
					<form id="empty-form"></form>
				</div>
			</section>

			<section id="cf-context" role="cf-context" cf-context>
				
			</section>
		</main>



		<!-- Examples specific code below -->
		<script>
			// check formless.json
			var testValidation = function(dto, success, error){
				console.log("testValidation setup from formless.json, dto:", dto);
				if(dto.text.indexOf("holmes") != -1)
					return success();
				return error();
			};

			var conversationalForm;

			// check formless.json
			var onFormlessSubmitted = function(cf){
				var formData = conversationalForm.getFormData();
				var formDataSerialized = conversationalForm.getFormData(true);
				console.log("Formdata:", formData);
				console.log("Formdata, obj:", formDataSerialized);
				conversationalForm.addRobotChatResponse("Check the dev console for FormatData output.")

			}

			var step = 0;

			var onStepCallback = function(dto, success, error){
				// fake load, to illustrate how oe could communicate with a back-end service which could return new tags based on answer.
				var xhr = new XMLHttpRequest()
				xhr.onload = function(event){
					if(step++ == 0){
						// add tags that are received from pseudo webservice ..
						var tags = [
							{
								// select group
								"tag": "select",
								"name": "country",
								"cf-questions": "First tag value: {first-tag}&& + follow-up",
								"cf-input-placeholder": "Some copy",
								"multiple": false,
								"children":[
									{
										"tag": "option",
										"cf-label": "USA",
										"value": "usa"
									},
									{
										"tag": "option",
										"cf-label": "UK",
										"value": "uk"
									}
								]
							},
							{
								// basic tag
								"tag": "input",
								"type": "text",
								"cf-questions": "Tag is injected at runtime, data from 'webservice', check source of <a href='formless.html' style='text-decoration:underline'>formless.html</a>",
								"cf-error": "Inject some text"
							},
							{
								// tag group
								"tag": "fieldset",
								"type": "Checkboxes",
								"cf-input-placeholder": "Tag group is injected",
								"cf-questions": "Choose an injected tag",
								"children":[
									{
										"tag": "input",
										"type": "checkbox",
										"name": "checkboxes-buttons-1",
										"cf-label": "checkbox-x1",
										"checked": "checked"
									},
									{
										"tag": "input",
										"type": "checkbox",
										"name": "checkboxes-buttons-1",
										"cf-label": "checkbox-x2"
									}
								]
							}
						];


						console.log("Tags to parse and add at runtime to formless:", tags)

						// add tag
						// add tag at index
						conversationalForm.addTags(tags, true);
					}

					setTimeout(function(){
						// fake loading...
						success();
					}, 1000);
					
				}
				xhr.onerror = function(){
					error("Webservice failed??")
				}

				xhr.open("GET", window.location.href);
				xhr.send();
			}

			// load json file with formless data (files/formless.json)
			window.onload = function(){
				var xhr = new XMLHttpRequest()
				xhr.onload = function(event){
					var str = xhr.response;
					var json = JSON.parse(str);

					console.log("JSON to parse as form:", json)

					// start one w. string
					// window.cf.ConversationalForm.startTheConversation(str);

					// add callback hooks..
					json.options.submitCallback = onFormlessSubmitted.bind(window);
					json.options.flowStepCallback = onStepCallback.bind(window);
					
					// start one w. json
					conversationalForm = window.cf.ConversationalForm.startTheConversation(json);
					document.getElementById("cf-context").appendChild(conversationalForm.el);

					// in-document form
					// window.cf.ConversationalForm.startTheConversation({
					// 	formEl: document.getElementById("empty-form")
					// });
				}
				xhr.open("GET", "files/formless.json");
				xhr.send();
			};
		</script>
	</body>
</html>
